<template>
  <div class="completion_info">
    <work-order-bom-tree
      @selectNode="selectNode"
      class="mes_tree"
    ></work-order-bom-tree>
    <div class="completion_detail">
      <el-tabs class="mes_tabs" v-model="activeTabs" type="border-card">
        <el-tab-pane name="first">
          <div slot="label">当前工单齐套
            <el-tooltip class="item" effect="dark" content="刷新" placement="bottom">
              <i
                @click="getCurrentList"
                v-show="activeTabs === 'first'"
                class="iconfont icon-shuaxin">
              </i>
            </el-tooltip>
          </div>
          <completion-current ref="completionCurrent"></completion-current>
        </el-tab-pane>
        <el-tab-pane v-if="isRoot" name="second">
          <span slot="label">最底层上料齐套
            <el-tooltip class="item" effect="dark" content="刷新" placement="bottom">
              <i
                @click="getBottomList"
                v-show="activeTabs === 'second'"
                class="iconfont icon-shuaxin">
              </i>
            </el-tooltip>
          </span>
          <completion-bottom ref="completionBottom"></completion-bottom>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
/**
 * @author liubaohui
 */
import {CompletionBottom, CompletionCurrent} from './components/index'

export default {
  name: 'CompletionInfo',
  components: {
    CompletionBottom,
    CompletionCurrent,
  },
  data() {
    return {
      workorderId: '', // 工单id
      workorderNumber: '', // 工单编号
      activeTabs: 'first', // 当前激活的tab
      isRoot: false // 是否显示最底层上料齐套
    }
  },
  methods: {
    // 选中节点
    selectNode(comId, comNumber, level) {
      if (comId === undefined) this.$refs.completionCurrent.cleanData()
      this.workorderId = comId
      this.workorderNumber = comNumber
      this.isRoot = level === 3
      this.getCurrentList()
      if (this.isRoot) {
        // 如果是根节点则获取底层齐套
        this.$nextTick(() => {
          this.getBottomList()
        })
      } else {
        // 如果不是则将标签切换到第一个
        this.activeTabs = 'first'
      }
    },
    // 获取当前工单齐套
    getCurrentList() {
      this.$refs.completionCurrent.setWorkorder(this.workorderId, this.workorderNumber)
    },
    // 获取最底层上料齐套
    getBottomList() {
      this.$refs.completionBottom.setWorkorder(this.workorderId, this.workorderNumber)
    }
  }
}
</script>

<style lang="less">
  .completion_info {
    .mes_tabs.el-tabs--border-card > .el-tabs__header {
      margin: 0 20px !important;
    }
  }
</style>

<style lang="less" scoped>
  .completion_info {
    display: flex;
    overflow-x: hidden;
    height: 100%;
    .mes_tree {
      flex: 0 0 350px;
    }
    .completion_detail {
      flex: 1;
      overflow-x: auto;
      padding-top: 20px;
      .icon-shuaxin {
        font-size: 14px;
      }
    }
  }
</style>
